<template>
  <div class="homecontainer _homecontainer">
      <div style="height:799px;" class="width100 pc-content">
          <img :src="require('./imgs/banner.png')" class="width100"/>
      </div>

      <div class="width100 mobile-content">
          <img :src="require('./imgs/banner.png')" class="width100"/>
      </div>

      <div class="p-l-40 p-r-40 pc-content">
          <div class="h60 m-t-50 view flex-row align-center wow  fadeInUp" style="background-color:rgba(255,255,255,.1);border-radius: 4px 4px 4px 4px;border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)) 1 1;border: 1px solid;">
            <img :src="require('./imgs/box.png')" style="width:50px;height:50px;" class="m-r-15 m-l-28"/>
            <div class="c-fff fz-16">梦境是一款元宇宙的生态应用，目前已上线NFT数字藏品的交易平台，在即到来的元宇宙世界，梦境将不懈努力实现沉浸交互式的3D世界。</div>
          </div>

          <div class="view flex-row align-center m-t-70 lightSpeedInLeft wow">
                <div class="ngx-box ">
                  <div class="sum-color-box weapbox">
                      <img :src="require('../Home/imgs/test1.png')" class="width100 height100" style="border-radius: 5px;"/>
                  </div>
                  <div class="c_f6 fz-18 m-t-20">数字藏品标题占位符</div>
                </div>
                
                <div class="ngx-box ">
                  <div class="sum-color-box weapbox">
                      <img :src="require('../Home/imgs/test1.png')" class="width100 height100" style="border-radius: 5px;"/>
                  </div>
                  <div class="c_f6 fz-18 m-t-20">数字藏品标题占位符</div>
                </div>
                
                <div class="ngx-box">
                  <div class="sum-color-box weapbox">
                      <img :src="require('../Home/imgs/test1.png')" class="width100 height100" style="border-radius: 5px;"/>
                  </div>
                  <div class="c_f6 fz-18 m-t-20">数字藏品标题占位符</div>
                </div>
          </div>

          <div class="m-t-107">

            <div class="view flex-row align-center m-b-98 justify-between">
              <div class="m-r-137 wow fadeInLeft">
                <div class="c_f6 fz-36 m-b-20 t-left">藏品生态</div>
                <div class="c_e6 fz-18 ling-box t-left">梦境是一款元宇宙世界的玩家创，和玩家收藏的多链 平台，让每一个创意在这里得到尊重</div>
              </div>
              <div class="wow fadeInRight">
                  <img :src="require('./imgs/seria-box1.png')" class="w524 h524"/>
              </div>
            </div>

            <div class="view flex-row align-center m-b-59 justify-between">
              <div class="m-r-135 wow fadeInLeft">
                  <img :src="require('./imgs/seria-box2.png')" class="w548 h450"/>
              </div>
              <div class="wow fadeInRight">
                <div class="c_f6 fz-36 m-b-20 t-left">多链元界</div>
                <div class="c_e6 fz-18 ling-box t-left">梦境是一款元宇宙世界的玩家创，和玩家收藏的多链 平台，让每一个创意在这里得到尊重</div>
              </div>
            </div>

            <div class="view flex-row align-center m-b-111 justify-between">
              <div class="m-r-137 wow fadeInLeft">
                <div class="c_f6 fz-36 m-b-20 t-left">沉浸式元宇宙</div>
                <div class="c_e6 fz-18 ling-box t-left">创作者可以通过构建可以连接到外部服务和应用程 序的沉浸式 3D应用程序 来丰富和扩展世界。</div>
              </div>

              <div class="wow fadeInRight">
                  <img :src="require('./imgs/seria-box3.png')" class="w524 h524"/>
              </div>
            </div>

            <div class="view flex-row align-center m-b-90 justify-between">
              <div class="m-r-135 wow fadeInLeft">
                  <img :src="require('./imgs/seria-box3.png')" class="w502 h535"/>
              </div>

              <div class="wow fadeInRight">
                <div class="c_f6 fz-36 m-b-20 t-left">自主创建</div>
                <div class="c_e6 fz-18 ling-box t-left">在区块链上导入各种模型创建 NFT，并使用自动化工 具创建游戏中的建筑物和构造。以完成属于您创作的 元宇宙世界</div>
              </div>

            </div>

            <div class="view flex-row align-center m-b-114 justify-between">
              <div class="m-r-137 wow fadeInLeft">
                <div class="c_f6 fz-36 m-b-20 t-left">元宇宙世界</div>
                <div class="c_e6 fz-18 ling-box t-left">公共和用户创建的娱乐场所都将建立在虚拟世界中， 每一个星球对应不一样的主题，每个主题之下可以 依据生态公约的基础上二次创建，包括游戏、NFT 画廊和体育中心，娱乐，商务，驾驶...... 玩家可以在这里享受他们的第二人生。</div>
              </div>

              <div class="wow fadeInRight">
                  <img :src="require('./imgs/seria-box4.png')" class="w561 h458"/>
              </div>
            </div>

          </div>

          <div>
              <div class="m-b-43 wow fadeInDown">
                <div class="m-b-4 c_e5e fz-36">ROADMAP</div>
                <div class="m-b-4 c_e5e fz-32">路线图</div>
              </div>
              <simple-step-bar></simple-step-bar>
          </div>


          <div>
              <div class="m-b-60 wow fadeInUpBig">
                <div class="m-b-4 c_e5e fz-36">OUR COLLABORATORS</div>
                <div class="m-b-4 c_e5e fz-32">我们的合作者</div>
              </div>

              <div class="view flex-row  flex-wrap wow fadeInUpBig">
                  <div v-for="(item, index) in parants" :key="index" class="ict h90 m-b-45 m-r-56">
                    <img :src="require(`./imgs/${index + 1}.png`)" class="width100 height100"/>
                  </div>
                  
              </div>
          </div>
      </div>
      
      <div class="mobile-content m-l-20 m-r-20">
          <div class=" m-t-10  p-l-20 p-r-20 p-t-20 p-b-20 view flex-row wow  fadeInUp" style="background-color:rgba(255,255,255,.1);border-radius: 4px 4px 4px 4px;border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)) 1 1;border: 1px solid;">
            <img :src="require('./imgs/box.png')" style="width:50px;height:50px;" class=" m-r-15"/>
            <div class="c-fff fz-12 text-left">梦境是一款元宇宙的生态应用，目前已上线NFT数字藏品的交易平台，在即到来的元宇宙世界，梦境将不懈努力实现沉浸交互式的3D世界。</div>
          </div>

          <div class="view m-t-15">
                <div class="ngx-box m-b-20">
                  <div class="sum-color-box ">
                      <img :src="require('../Home/imgs/test1.png')" class="width100 height100" style="border-radius: 5px;"/>
                  </div>
                  <div class="c_f6 fz-18 m-t-20">数字藏品标题占位符</div>
                </div>

                <div class="ngx-box m-b-20">
                  <div class="sum-color-box ">
                      <img :src="require('../Home/imgs/test1.png')" class="width100 height100" style="border-radius: 5px;"/>
                  </div>
                  <div class="c_f6 fz-18 m-t-20">数字藏品标题占位符</div>
                </div>

                <div class="ngx-box m-b-20">
                  <div class="sum-color-box ">
                      <img :src="require('../Home/imgs/test1.png')" class="width100 height100" style="border-radius: 5px;"/>
                  </div>
                  <div class="c_f6 fz-18 m-t-20">数字藏品标题占位符</div>
                </div>
          </div>


          <div class="m-t-15">

              <div class="view flex-row align-center m-b-20 justify-between">
                <div class="m-r-15 flex-1 wow fadeInLeft">
                  <div class="c_f6 fz-16 m-b-20 t-left">藏品生态</div>
                  <div class="c_e6 fz-12 ling-box t-left">梦境是一款元宇宙世界的玩家创，和玩家收藏的多链 平台，让每一个创意在这里得到尊重</div>
                </div>

                <div class="wow fadeInRight">
                    <img :src="require('./imgs/seria-box1.png')" class="pro-img"/>
                </div>
              </div>

              <div class="view flex-row align-center m-b-20 justify-between">
                <div class="m-r-15 flex-1 wow fadeInLeft">
                    <img :src="require('./imgs/seria-box2.png')" class="pro-img"/>
                </div>
                <div class="wow fadeInRight">
                  <div class="c_f6 fz-16 m-b-20 t-left">多链元界</div>
                  <div class="c_e6 fz-12 ling-box t-left">梦境是一款元宇宙世界的玩家创，和玩家收藏的多链 平台，让每一个创意在这里得到尊重</div>
                </div>
              </div>

              <div class="view flex-row align-center m-b-20 justify-between">
                <div class="m-r-15 flex-1 wow fadeInLeft">
                  <div class="c_f6 fz-16 m-b-20 t-left">沉浸式元宇宙</div>
                  <div class="c_e6 fz-12 ling-box t-left">创作者可以通过构建可以连接到外部服务和应用程 序的沉浸式 3D应用程序 来丰富和扩展世界。</div>
                </div>

                <div class="wow fadeInRight">
                    <img :src="require('./imgs/seria-box3.png')" class="pro-img"/>
                </div>
              </div>

              <div class="view flex-row align-center m-b-20 justify-between">
                <div class="m-r-15 flex-1 wow fadeInLeft">
                    <img :src="require('./imgs/seria-box3.png')" class="pro-img"/>
                </div>

                <div class="wow fadeInRight">
                  <div class="c_f6 fz-16 m-b-20 t-left">自主创建</div>
                  <div class="c_e6 fz-12 ling-box t-left">在区块链上导入各种模型创建 NFT，并使用自动化工 具创建游戏中的建筑物和构造。以完成属于您创作的 元宇宙世界</div>
                </div>
              </div>

              <div class="view flex-row align-center m-b-20 justify-between">
                  <div class="m-r-15 flex-1 wow fadeInLeft">
                    <div class="c_f6 fz-16 m-b-20 t-left">元宇宙世界</div>
                    <div class="c_e6 fz-12 ling-box t-left">公共和用户创建的娱乐场所都将建立在虚拟世界中， 每一个星球对应不一样的主题，每个主题之下可以 依据生态公约的基础上二次创建，包括游戏、NFT 画廊和体育中心，娱乐，商务，驾驶...... 玩家可以在这里享受他们的第二人生。</div>
                  </div>

                  <div class="wow fadeInRight">
                      <img :src="require('./imgs/seria-box4.png')" class="pro-img"/>
                  </div>
              </div>

          </div>

          <div >
              <div class="m-b-20 wow fadeInDown">
                <div class="m-b-4 c_e5e fz-16">ROADMAP</div>
                <div class="m-b-4 c_e5e fz-12">路线图</div>
              </div>
              <simple-step-bar></simple-step-bar>
          </div>

          <div>
              <div class="m-b-20 wow fadeInUpBig">
                <div class="m-b-4 c_e5e fz-16">OUR COLLABORATORS</div>
                <div class="m-b-4 c_e5e fz-12">我们的合作者</div>
              </div>

              <div class="view flex-row  flex-wrap wow fadeInUpBig">
                  <div v-for="(item, index) in parants" :key="index" class="ict m-b-45 m-r-56">
                    <img :src="require(`./imgs/${index + 1}.png`)" class="width100 height100"/>
                  </div>
                  
              </div>
          </div>

      </div>

  </div>
</template>

<script>
import { WOW } from "wowjs";
import GoodBriefInfo from './subcomponents/GoodBriefInfo'
import SimpleStepBar from './subcomponents/simple-step-bar'
export default {
  components: {
    GoodBriefInfo,
    SimpleStepBar
  },
  data() {
    return {
      parants: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
      ]
    }
  },
  mounted() {
      //第一种写法，可以设置wow中属性
      this.$nextTick(() => {
        // 在dom渲染完后,再执行动画
        var wow = new WOW({
          boxClass: "wow", ///动画元件css类（默认为wow）
          animateClass: "animated", //动画css类（默认为animated）
          offset: 0, //到元素距离触发动画（当默认为0）
          mobile: true, //在移动设备上触发动画（默认为true）
          live: true, //对异步加载的内容进行操作（默认为true）
        });
        wow.init();
      });
  },
}
</script>

<style lang="less" scoped>

.w524 {width: 524px;}
.h524 {height: 524px;}
.w548 {width: 548px;}
.w502 {width: 502px;}
.h535 {height: 535px;}
.h450 {height: 450px;}
.w561 {width: 561px;}
.h458 {height: 458px;}
.m-r-135 {margin-right: 135px;}
.m-b-59 {margin-bottom: 59px;}
.ict {width: calc( ( 100% - 340px ) / 6);}
._homecontainer {
  background-image: url('./imgs/picc.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.t-left {text-align: left;}
.header {
  width: 100%;
  
}
.ling-box {line-height: 2;width: 414px;}
.weapbox {width:  calc((100vw - 270px) / 3);height:  calc((100vw - 270px) / 3);}


.ngx-box {
  margin-right: 90px;
  text-align: left;
}

.ngx-box:last-child {
  margin-right: 0px;
}

.sum-color-box {
    border-image: linear-gradient(285deg, rgba(246, 224, 165, 0.3), rgba(246, 224, 165, 0.7)) 1 1;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid;
    padding: 10px;
}

// 大于800px
@media only screen and (min-width: 800px){
    
}

// 小于800px
@media only screen and (max-width: 800px){
  .ict {width:calc((100% - 40px) / 2);margin-right:40px;margin-bottom:15px !important;}
  .ict:nth-child(2n) {
    margin-right: 0 !important;
  }
  .ngx-box {margin-right: 0 !important;}
  .pro-img {
    width: calc(50vw - 40px);
    height: calc(50vw - 40px);
  }
  .ling-box {width: auto !important;}
  /deep/.li1 {
    font-size: 12px !important;
    padding-bottom: 95px;
  }
  /deep/.inleftn {
    transform: translateX(-175px) !important;
  }
}
</style>
